<!-- components/SearchBox.vue -->
<template>
  <view class="search-container" :style="containerStyle">
    <!-- 带图标的搜索模式 -->
    <view  class="search-with-icon">
      <u-icon
        v-if="showIcon"
        name="/orderPages/static/search.png"
        :size="iconSize"
        :color="iconColor"
        class="search-icon"
      ></u-icon>
      <input
        class="search-input"
        :placeholder="placeholder"
        :placeholder-style="placeholderStyle"
        :focus="autoFocus"
        :value="modelValue"
		v-model="keyWords"
        @input="handleInput"
		@focus="handleFocus"
        @confirm="handleSearch"
        :style="inputStyle"
      />
	  <button class="search-btn" @click="handleSearch(keyWords)">搜索</button>
    </view>

    <!-- 不带图标的简约模式 -->
    <!-- <view v-else class="simple-search">
      <input
        class="simple-input"
        :placeholder="placeholder"
        :placeholder-style="placeholderStyle"
        :value="modelValue"
        @input="handleInput"
		
        @confirm="handleSearch"
        :style="inputStyle"
      />
      <u-button
        type="primary"
        :custom-style="buttonStyle"
        @click="handleSearch"
      >搜索</u-button>
    </view> -->
  </view>
</template>

<script setup>
import { ref,computed } from 'vue'
import { debounce } from 'lodash'

const keyWords = ref('')
const props = defineProps({
  // 是否显示搜索图标
  showIcon: {
    type: Boolean,
    default: true
  },
  // 输入值
  modelValue: {
    type: String,
    default: ''
  },
  // 占位文字
  placeholder: {
    type: String,
    default: '请输入产品名称'
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: '#999999'
  },
  // 图标大小
  iconSize: {
    type: [Number, String],
    default: 14
  },
  // 输入框样式
  inputStyle: {
    type: Object,
    default: () => ({})
  },
  // 容器样式
  containerStyle: {
    type: Object,
    default: () => ({})
  },
  // 是否自动聚焦
  autoFocus: {
    type: Boolean,
    default: false
  },
  // 按钮自定义样式
  buttonStyle: {
    type: Object,
    default: () => ({
      width: '120rpx',
      height: '60rpx',
      fontSize: '28rpx'
    })
  }
})

const emit = defineEmits(['update:modelValue', 'search','handleFocus'])

// 处理输入事件
const handleInput = (e) => {
  emit('update:modelValue', e.detail.value)
}
// 处理获取焦点事件
const handleFocus = ()=>{
	emit('handleFocus')
}
// 处理搜索事件
const handleSearch =  () => {
  emit('search', keyWords.value)
}

// 计算placeholder样式
const placeholderStyle = computed(() => {
  return `color: ${props.iconColor}; font-size: 28rpx`
})
</script>

<style lang="scss" scoped>
.search-container {
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}

/* 带图标模式 */
.search-with-icon {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 40rpx;
  padding: 0 30rpx;
  padding-right: 10rpx;

  .search-icon {
    margin-right: 20rpx;
  }
	
  .search-input {
    flex: 1;
    height: 70rpx;
    font-size: 28rpx;
    color: #333;
  }
  .search-btn{
	  width: 104rpx;
	  height: 62rpx;
	  background-color: #FD3832;
	  border-radius: 31rpx;
	  color: #fff;
	  font-size: 26rpx;
	  padding: 0;
	  line-height: 62rpx;
  }
}

/* 简约模式 */
.simple-search {
  display: flex;
  gap: 20rpx;

  .simple-input {
    flex: 1;
    height: 70rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
  }
}
</style>